<template>
  <div>
    <ZuiSignUpHeader></ZuiSignUpHeader>
    <div
      class="ui container"
      style="margin-top:5em;padding-top:40px"
    >
      <div class="ui stackable grid">
        <div class="column sixteen wide computer sixteen wide mobile">
          <h1 is="sui-header">
            Join Tuery
            <sui-header-subheader style="margin-top:10px">
              加入Tuery,成为我们社区的一员
            </sui-header-subheader>
          </h1>
          <div class="ui tablet unstackable steps">
            <div
              class="step"
              :class="{active:step.active,disabled:step.disabled}"
              v-for="step in steps.list"
              :key="step.key"
              style="cursor:pointer"
              @click="activeIndex=step.key"
            >
              <i :class="step.icon"></i>
              <div class="content">
                <div class="title">{{step.title}}</div>
                <div class="description">{{step.description}}</div>
              </div>
            </div>
          </div>
          <!-- 填写信息栏-->
          <div class="ui stackable grid">
            <div class="column eleven wide computer sixteen wide mobile">
              <div class="ui stackable grid">
                <div class="column eleven wide computer eleven wide tablet sixteen wide mobile">
                  <div style="margin-bottom:25px">
                    <h1 style="font-size: 24px;font-weight: 300;letter-spacing: -.5px;">Create your personal account</h1>
                  </div>
                  <sui-tab
                    :menu="{ secondary: true }"
                    :active-index.sync="activeIndex"
                  >
                    <sui-tab-pane
                      title="account"
                      :attached="false"
                    >
                      <form class="ui form">
                        <div
                          class="field"
                          :class="{error:field.error,required:field.required}"
                          v-for="field in account.fields"
                          :key="field.id"
                        >
                          <label>{{field.description}}</label>
                          <div class="ui left icon input">
                            <i :class="field.icon"></i>
                            <input
                              :type="field.type"
                              :name="field.name"
                              :placeholder="field.placeholder"
                              v-model="field.value"
                              v-validate.continues="`required|${field.rule}`"
                              :key="field.name"
                            >
                          </div>
                        </div>
                      </form>
                      <div
                        class="ui message"
                        :class="account.message.status"
                        v-if="errors.all().length>=1"
                      >
                        <!-- <div class="header">Form Completed</div>-->
                        <ul class="list">
                          <li v-for="error in errors.all()">{{ error }}</li>
                        </ul>
                      </div>
                      <sui-button
                        class="ui teal submit"
                        icon="right chevron"
                        label-position="right"
                        content="Foward"
                        @click="()=>{errors.all().length<=0&&activeIndex<(steps.list.length-1) ?activeIndex++:register()}"
                        style="float: right;margin-top:14px"
                      />
                    </sui-tab-pane>
                    <sui-tab-pane
                      title="user"
                      :attached="false"
                    >
                      <form class="ui form">
                        <div
                          class="field"
                          :class="{error:field.error,required:field.required}"
                          v-for="field in user.fields"
                          :key="field.id"
                        >
                          <label>{{field.description}}</label>
                          <div class="ui left icon input">
                            <i :class="field.icon"></i>
                            <input
                              :type="field.type"
                              :name="field.name"
                              :placeholder="field.placeholder"
                              v-model="field.value"
                              v-validate.continues="`required|min:1|${field.rule}`"
                              :key="field.name"
                            >
                          </div>
                        </div>
                      </form>
                      <div
                        class="ui message"
                        :class="user.message.status"
                        v-if="errors.all().length>=1"
                      >
                        <!-- <div class="header">Form Completed</div>-->
                        <ul class="list">
                          <li v-for="error in errors.all()">{{ error }}</li>
                        </ul>
                      </div>
                      <sui-button
                        class="ui"
                        icon="left chevron"
                        label-position="left"
                        content="Back"
                        @click="activeIndex--"
                        style="margin-top:14px"
                      />
                      <sui-button
                        class="ui teal"
                        icon="right chevron"
                        label-position="right"
                        content="Foward"
                        style="float: right;margin-top:14px"
                        @click="activeIndex++"
                      />
                    </sui-tab-pane>
                    <sui-tab-pane
                      title="privacy"
                      :attached="false"
                    >
                      <form class="ui form">
                        <div
                          class="field"
                          :class="{error:field.error,required:field.required}"
                          v-for="field in privacy.fields"
                          :key="field.id"
                        >
                          <label>{{field.description}}</label>
                          <div class="ui left icon input">
                            <i :class="field.icon"></i>
                            <input
                              :type="field.type"
                              :name="field.name"
                              :placeholder="field.placeholder"
                              v-model="field.value"
                              v-validate.continues="`required|min:1|${field.rule}`"
                              :key="field.name"
                            >
                          </div>
                        </div>
                      </form>
                      <div
                        class="ui message"
                        :class="privacy.message.status"
                        v-if="errors.all().length>=1"
                      >
                        <!-- <div class="header">Form Completed</div>-->
                        <ul class="list">
                          <li v-for="error in errors.all()">{{ error }}</li>
                        </ul>
                      </div>
                      <sui-button
                        class="ui"
                        icon="left chevron"
                        label-position="left"
                        content="Back"
                        @click="activeIndex--"
                        style="margin-top:14px"
                      />
                    </sui-tab-pane>
                  </sui-tab>
                </div>
              </div>
              <div class="column five wide computer five wide tablet only print hidden">
              </div>
            </div>
            <div class="column five wide computer only print hidden">
              <sui-card>
                <sui-card-content style="margin-left:7px">
                  <sui-card-header>
                    You’ll love Tuery
                  </sui-card-header>
                </sui-card-content>
                <sui-card-content style="margin-left:8px">
                  <div class="ui small feed">
                    <div class="event">
                      <div class="content">
                        <div class="summary">
                          to the project
                        </div>
                      </div>
                    </div>
                    <div class="event">
                      <div class="content">
                        <div class="summary">
                          Administrator
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- end of base semantic ui, to be updated in the future with sui-feed -->
                </sui-card-content>
                <sui-card-content extra>
                  <div class="event">
                    <div class="content">
                      <div class="summary">
                        <sui-list>
                          <sui-list-item>
                            <sui-list-icon name="marker" />
                            <sui-list-content>
                              <a is="sui-list-header">Krowlewskie Jadlo</a>
                              <sui-list-description>
                                An excellent polish restaurant, quick delivery and hearty, filling meals.
                              </sui-list-description>
                            </sui-list-content>
                          </sui-list-item>
                          <sui-list-item>
                            <sui-list-icon name="marker" />
                            <sui-list-content>
                              <a is="sui-list-header">Xian Famous Foods</a>
                              <sui-list-description>
                                A taste of Shaanxi"s delicious culinary traditions, with delights like spicy cold noodles
                                and lamb burgers.
                              </sui-list-description>
                            </sui-list-content>
                          </sui-list-item>
                          <sui-list-item>
                            <sui-list-icon name="marker" />
                            <sui-list-content>
                              <a is="sui-list-header">Sapporo Haru</a>
                              <sui-list-description>
                                Greenpoint"s best choice for quick and delicious sushi.
                              </sui-list-description>
                            </sui-list-content>
                          </sui-list-item>
                        </sui-list>
                      </div>
                    </div>
                  </div>
                </sui-card-content>
              </sui-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ZuiSignUpHeader from "@/components/ZuiSignUpHeader.vue";
export default {
  name: "Up",
  components: {
    ZuiSignUpHeader
  },
  watch: {
    activeIndex: function(newVal, oldVal) {
      this.steps.list.forEach(step => {
        if (step.key == newVal) {
          step.disabled = false;
          step.active = true;
        } else if (step.key > newVal) {
          step.disabled = true;
          step.active = false;
        } else if (step.key < newVal) {
          step.disabled = false;
          step.active = false;
        }
      });
    }
  },
  data() {
    return {
      activeIndex: 0,
      account: {
        fields: [
          {
            id: 1,
            name: "username",
            icon: "user icon",
            description: "账户名",
            required: true,
            placeholder: "enter your username",
            type: "text",
            error: false,
            value: "",
            rule: "min:1"
          },
          {
            id: 2,
            name: "email",
            icon: "mail icon",
            description: "电子邮箱地址",
            required: true,
            placeholder: "enter E-mail address",
            type: "email",
            error: false,
            rule: "min:5|email"
          },
          {
            id: 3,
            name: "password",
            icon: "lock icon",
            description: "密码",
            required: true,
            placeholder: "enter your password",
            type: "password",
            error: false,
            rule: "min:3"
          }
        ],
        message: {
          status: "error",
          list: []
        }
      },
      user: {
        fields: [
          {
            id: 1,
            name: "username",
            icon: "user icon",
            description: "用户名",
            required: true,
            placeholder: "enter your username",
            type: "text",
            error: false,
            value: "",
            rule: ""
          }
        ],
        message: {
          status: "error",
          list: []
        }
      },
      privacy: {
        fields: [
          {
            id: 1,
            name: "description",
            icon: "user icon",
            description: "个人简介",
            required: true,
            placeholder: "enter your username",
            type: "text",
            error: false,
            value: "",
            rule: ""
          }
        ],
        message: {
          status: "error",
          list: []
        }
      },
      steps: {
        list: [
          {
            key: 0,
            title: "Account",
            description: "Enter your account information",
            icon: "user circle icon",
            disabled: false,
            active: true
          }
          // {
          //   key: 1,
          //   title: "User",
          //   description: "Enter your user information",
          //   icon: "street view icon",
          //   disabled: true,
          //   active: false
          // },
          // {
          //   key: 2,
          //   title: "Privacy",
          //   description: "Enter your privacy information",
          //   icon: "id card icon",
          //   disabled: true,
          //   active: false
          // }
        ]
      }
    };
  },
  methods: {
    register() {
      const user = {};
      this.account.fields.forEach(e => {
        user[e.name] = e.value;
      });
      console.log(user);
      this.$store.dispatch("authentication/register", user);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@tablet: 992px;
@mobile: 768px;
.search-navigation {
  background-color: #59666c;
  padding: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.ui.steps .step {
  // @media (max-width: @tablet) {
  //   width: 170px;
  // }
  // @media (max-width: 512px) {
  //   width: 110px;
  // }
  // @media (max-width: 400px) {
  //   width: 105px;
  // }
  // @media (max-width: 350px) {
  //   width: 95px;
  // }
}
h1.ui.header {
  font-size: 45px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 0;
  margin-top: 0;
}
h1.ui.header .sub.header {
  font-size: 21px;
  margin-bottom: 0;
  margin-top: 2px;
  color: #586069;
}
.ui.segment {
  box-shadow: none;
  border-radius: 0;
  border: none;
  margin: 0;
  padding: 0;
}
/deep/ .ui.secondary.menu {
  display: none;
}
</style>
